<route>
{
meta: {
title: '管理员账号信息'
}
}
</route>

<template>

    <div style="margin-left: 20px; margin-right: 20px;margin-top: 35px;">
        <!-- style="margin-left: 20px;margin-top: 20px;" -->

        <el-row>
            <el-col :span="16">
                <el-form :model="queryParams"
                         ref="queryFormRef"
                         :inline="true"
                         label-width="68px">
                    <el-form-item label="用户名"
                                  prop="account">
                        <el-input v-model="queryParams.account"
                                  placeholder="请输入用户名"
                                  clearable
                                  @keyup.enter="handleQuery"/>
                    </el-form-item>
                    <el-form-item label="手机号"
                                  prop="phone_number">
                        <el-input v-model="queryParams.phone_number"
                                  placeholder="请输入用户手机号"
                                  clearable
                                  @keyup.enter="handleQuery"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary"
                                   :icon="Search"
                                   @click="handleQuery"
                                   round
                                   plain>搜索
                        </el-button>
                        <el-button :icon="Refresh"
                                   @click="resetQuery"
                                   round
                                   plain>重置
                        </el-button>
                    </el-form-item>
                </el-form>

            </el-col>
        </el-row>

        <el-divider>
            <el-icon>
                <star-filled/>
            </el-icon>
        </el-divider>
        <el-row :gutter="10"
                class="mb8">
            <el-col :span="1.5">
                <el-button type="primary"
                           plain
                           :icon="Plus"
                           @click="handleAdd">新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-upload action="http://localhost:8888/user/upload"
                           :on-success="handleImportSuccess"
                           :on-error="handleImportError"
                           :headers="myHeaders">
                    <el-button type="success"
                               plain
                               :icon="Upload">导入
                    </el-button>
                </el-upload>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning"
                           plain
                           :icon="Download"
                           @click="expExcel">导出
                </el-button>
            </el-col>
        </el-row>
        <!--        表单-->
        <el-table :data="userList">
            <el-table-column fixed=""
                             type="index"
                             label="序号"
                             :index="pageNum"/>

            <el-table-column label="用户名"
                             prop="account"/>

            <el-table-column prop="phone_number"
                             label="手机号"/>
            <el-table-column prop="permissions"
                             label="用户权限"/>
            <el-table-column prop="use_flag"
                             label="使用标志">
                <template #default="scope">

                    <el-switch v-model="scope.row.use_flag"
                               active-color="#13ce66"
                               inactive-color="#ff4949"
                               :active-value="0"
                               :inactive-value="1"
                               @change="updateLabFlag(scope.row)"/>
                </template>
            </el-table-column>

            <el-table-column fixed="right"
                             label="操作"
                             width="200px">
                <template #default="scope">
                    <el-button type="success"
                               plain
                               size="small"
                               @click="handleEdit(scope.row)">编辑
                    </el-button>
                    <el-button size="small"
                               plain
                               type="danger"
                               @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="page.total > 0"
            :total="page.total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
        />

        <div>
            <!-- 添加或修改角色配置对话框 -->
            <el-dialog :title="title"
                       v-model="operForm.open"
                       width="500px"
                       append-to-body>
                <el-form :model="operForm.form"
                         ref="queryFormRef"
                         label-width="100px">
                    <el-form-item label="用户名称"
                                  prop="account">
                        <el-input v-model="operForm.form.account"
                                  placeholder="请输入角色名称"/>
                    </el-form-item>
                    <el-form-item label="手机号"
                                  prop="phone_number">
                        <el-input v-model="operForm.form.phone_number"
                                  placeholder="请输入手机号"/>
                    </el-form-item>
                    <el-form-item label="密码"
                                  prop="password">
                        <el-input v-model="operForm.form.password"
                                  placeholder="请输入密码"/>
                    </el-form-item>
                    <el-form-item label="用户权限"
                                  prop="permissions">
                        <el-input v-model="operForm.form.permissions"
                                  placeholder="请选择角色权限"/>
                    </el-form-item>

                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button type="primary"
                                   @click="submitForm">确 定
                        </el-button>
                        <el-button @click="cancel">取 消</el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>

</template>

<script lang="ts" setup>
import {
    StarFilled,
    Edit,
    Share,
    Delete,
    Search,
    Upload,
    Download,
    Refresh,
    Plus,
    User,
} from '@element-plus/icons-vue'
import {
    defineComponent,
    onMounted,
    reactive,
    toRef,
    ref,
    computed,
    toRefs,
    getCurrentInstance,
} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import api from '@/api'
import {request} from '../../api/index'

const userList = ref([])
const loading = ref(true)
const queryFormRef = ref(null)
const open = ref(false)
const title = ref('')
const pageNum = ref(1)

/**
 * 分页
 */
const handleSizeChange = (pagesize) => {
    console.log('每页几条数据' + pagesize)
    page.value.pagesize = pagesize
    getList()
}
const handleCurrentChange = (currentpage) => {
    console.log('当前第几页' + currentpage)
    page.value.currentpage = currentpage
    getList()
}
const page = ref({
    total: 1,
    currentpage: 1,
    pagesize: 10,
})

//-----------------------------

/**
 * excel 导入
 */
const handleImportSuccess = () => {
    ElMessage.success('导入成功')
    getList()
}
const handleImportError = () => {
    ElMessage.error('导入失败')
    getList()
}
//在请求头上携带token
const myHeaders = ref({
    Authorization: localStorage.getItem('token'),
})

/**
 * excel 导出
 */
const expExcel = () => {
    request(
        'get',
        `user/downloadFailedUsingJson`,
        'application/json; charset=UTF-8',
        'blob'
    ).then((res) => {
        let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
        let url = URL.createObjectURL(blob)
        const link = document.createElement('a') //创建a标签
        link.href = url
        link.download = '导出学生信息.xlsx' //重命名文件
        link.click()
        URL.revokeObjectURL(url)
        console.log('下载文件' + res)
    })
}
/**模糊查询条件 */
const queryParams = ref({
    pageNum: page.value.currentpage,
    pageSize: page.value.pagesize,
    phone_number: undefined,
    account: undefined,
    user_type: 1,
})
/**获取表单数据*/
// const getList = () => {
//     loading.value = true
//     console.log(queryParams.value)
//     api.post('user/selectUser', queryParams.value).then((res) => {
//         loading.value = false
//         userList.value = res.data
//         console.log('tableData=', userList.value)
//     })
// }


/*const getList = () => {
    loading.value = true
    console.log(queryParams.value)
    api
        .post(
            'user/selectAllPage?pageNum=' +
            page.value.currentpage +
            '&pageSize=' +
            page.value.pagesize
        )
        .then((res) => {
            page.value.total = res.data.total
            loading.value = false
            userList.value = res.data.list
            console.log('tableData=', userList.value)
            console.log(res)
        })
}*/

const getList = () => {
    loading.value = true
    console.log(queryParams.value)
    api
        .post(
            'user/selectAllPage', queryParams.value
        )
        .then((res) => {
            page.value.total = res.data.total
            loading.value = false
            userList.value = res.data.list
            console.log('tableData=', userList.value)
            console.log(res)
        })
}
/**删除按钮操作*/
const handleDelete = (row) => {
    const id = row.id
    console.log(id)
    const username = row.account
    ElMessageBox.confirm(
        '是否确认删除用户编号为"' + username + '"的数据项?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(function () {
            return api.post('user/deleteUser', {id}).then((res) => {
            })
        })
        .then(() => {
            getList()
            ElMessage.success('删除成功')
        })
        .catch(() => {
        })
}

/** 搜索按钮操作 */
function handleQuery() {
    pageNum.value = 1
    getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value.resetFields()
    handleQuery()
}

/**增加或修改表单数据 */
const operForm = ref({
    open: false,
    form: {
        id: undefined,
        account: undefined,
        password: undefined,
        phone_number: undefined,
        permissions: "teacher",
        use_flag: 0,
        user_type: 1,
    },
})

/** 重置新增的表单以及其他数据  */
function reset() {
    operForm.value.form = {
        id: undefined,
        account: undefined,
        password: undefined,
        phone_number: undefined,
        permissions: undefined,
        use_flag: 0,
        user_type: 1,
    }
    //重置搜索框
    queryFormRef.value.resetFields()
}

/**
 * 新增
 */
const handleAdd = () => {
    reset()
    operForm.value.open = true
    title.value = '添加角色'
}

/**编辑按钮操作 */
const handleEdit = (row) => {
    reset()
    const id = row.id
    console.log(id)
    api.post('user/selectById', {id}).then((res) => {
        operForm.value.form = res.data
        operForm.value.open = true
        console.log('tableData=', operForm.value.form)
    })
}

/** 提交按钮 */
function submitForm() {
    console.log(operForm.value.form.id)
    if (operForm.value.form.id != undefined) {
        api.post('user/updateUser', operForm.value.form).then((res) => {
            ElMessage.info('修改成功')
            console.log('tableData=', User.value)
            operForm.value.open = false
            getList()
        })
    } else {
        api.post('user/addUser', operForm.value.form).then((res) => {
            ElMessage.info('新增成功')
            operForm.value.open = false
            getList()
        })
    }
}

/** 取消按钮 */
function cancel() {
    open.value = false
    reset()
}

/**修改用户是否使用标志 */
const updateLabFlag = (row) => {
    api.post('user/updateUser', row).then((res) => {
    })
}
getList()
</script>
